<template>
	<view>
		<!-- 评论 -->
		<view class="rows bgwhite m-top20 p-top20 p-bot20 p-left30 bor_radius_30" v-if="pageData">
			<view class="row color_33 size28 bold">评论</view>
			<block v-for="(item,index) in pageData.reply" :key="item.review_id">
				<view class="rows p-bot40  m-top40"  :class="{'bot_bor':pageData.reply.length != index+1}">
		
					<!--  一级 -->
					<view class="row f-nowrap " @click="Comment(item)">
						<image :src="$imgUrls(item.fq_headimg)" mode="aspectFill" class="comHeadImg" webp></image>
						<view class="flex-1 d-flex j-sb">
							<view class="repleContent">
								<view class="d-flex a-center">
									<text class="name">{{item.fq_name}}</text>
									<text class="author" v-if="pageData.ftvid == item.fqvid">作者</text>
								</view>
								<view class="comment">
									<view class="comment_text">{{item.review_content}} </view>
									<text class="comment_time">{{item.addtime | Time}}</text>
								</view>
							</view>
							<view class="like "  @click.stop="zanItem(item,index)">
								<view class="iconfont size36 " 
									 :class="item.zan == '1'?'color icon-aixin':'color_99 icon-kongaixin'"></view>
								<text class="color_99 h6 m-top4" v-if="item.zanCount != 0">{{item.zanCount}}</text>
							</view>
						</view>
					</view>
					<!-- 二级 -->
					<view class="Secondary " v-if="item.reply && item.reply.length">
						<view class="row f-nowrap m-top20" v-for="(subItem,subIndex) in item.reply" :key="subItem.review_id" @click="Comment(subItem)">
							<image :src="$imgUrls(subItem.fq_headimg)" mode="aspectFill" class="comHeadImg" webp></image>
							<view class="flex-1 d-flex j-sb ">
							<view class="SecondaryContent">
								<view class="d-flex a-center">
									<text class="name">{{subItem.fq_name}}</text>
									<text class="author" v-if="pageData.ftvid == subItem.fqvid">作者</text>
								</view>
								<view class="comment">
									<block v-if="subItem.by_fqvid != item.fqvid">
										<text class="comment_text">回复</text>
										<text class="name m-left10">{{subItem.bfq_name}}</text>
										<text class="comment_text">：</text>
									</block>
									<view class="comment_text ">{{subItem.review_content}}</view>
									<text class="comment_time">{{subItem.addtime | Time}}</text>
								</view>
							</view>
							<view class="like " @click.stop="zansubItem(index,subItem,subIndex)">
								<view class="iconfont size36"
								      :class="subItem.zan == '1'?'color icon-aixin':'color_99 icon-kongaixin'"></view>
								<text class="color_99 h6 m-top4" v-if="subItem.zanCount != 0">{{subItem.zanCount}}</text>
							</view>
							</view>
						</view>
		
		
					</view>
		
		
		
				</view>
			</block>
		
		
			<emptys empty="comment" :top="20" v-if="!pageData.reply"></emptys>
		</view>
		
		
		<view class="commit  p-left30 p-right30 d-flex j-sb p-top20"
		      :style="{'height':120+tabbarHieght+'rpx'}" >
			<input type="text" class="commit_text flex-1" 
			       confirm-type="send" 
				   @confirm="confirmBtn" 
				   v-model="commont" 
				   placeholder-class="placeholdercc"
				    :cursor-spacing="10" 
					placeholder="说点好听的...">
			<view class="want d-flex j-sa ">
				<view class="d-flex f-column a-center" 
				      @click="zanBtn"
				     :class="pageData.zanok != '0'?'color':'color_99'">
					<view class="iconfont size46" 
					 :class="pageData.zanok != '0'?'color icon-aixin':'color_99 icon-kongaixin'"></view>
					<text class="h6 m-top4">{{pageData.zanCount}}</text>
				</view>
				<view class="d-flex f-column a-center" 
				     :class="pageData.collectionok != '0'?'color':'color_99'"
					 @click="collectionFileId">
					<view class="iconfont size46" 
					 :class="pageData.collectionok != '0'?'color icon-yishoucang':'color_99 icon-shoucang7'"></view>
					<text class="h6 m-top4">{{pageData.collectionCount}}</text>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		<u-popup :show="showReply" @close="cancelshowReply" :duration="200" :round="15">
			<view class="reply_content">
				<view class="row j-sb a-center  color_11">
					<text class="padding10 size30" @click="cancelshowReply">取消</text>
					<text class="bold600 size30">回复</text>
					<text class="color bold600 padding10 size30" @click="confirmBtn">发送</text>
				</view>
				<textarea v-model="commont" 
				         :placeholder="`回复 ${reply_name}:`" 
						auto-height :maxlength="-1" 
						:cursor-spacing="76" 
						disable-default-padding
						confirm-type="send"
					    class="textReply" 
						@confirm="confirmBtn" />
			</view>
		</u-popup>
		
		<u-popup :show="delcomment" @close="cannelDel" :round="15" :duration="200">
			<view class="popup_list black" @click="delReply">回复</view>
			<view class="popup_list color_ff2" @click="delcommentBtn">删除</view>
			<view class="popCent"></view>
			<view class="cancel" @click="cannelDel">取消</view>
		</u-popup>
		
		<showModel v-if="showModel" @hideModel="showModel = false"></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props:['infoData','file_id'],
		name:"Dcomment",
		data() {
			return {
				showModel:false,
				commont:'',
				showReply:false,
				delcomment:false, // 删除帖子
				pageData:'',
				reply_name: '', // 回复的人
				by_review_id: '', // 回复上一级的 review_id
				by_fqvid: '', // 回复人vid  fqvid
			};
		},
		methods:{
			Comment(item) {
				if(!this.vid) return this.showModel = true;
				this.by_review_id = item.review_id;
				this.by_fqvid = item.fqvid;
				this.reply_name = item.fq_name;
				if(item.fqvid == this.vid) return this.delcomment = true;
				this.showReply = true;
			},
			confirmBtn(e) {
				if(!this.vid) return this.showModel = true;
				if (!this.commont) return this.$Toast('内容不能为空!');
				this.$http.post({
					url: '/communityApi/commentFileId',
					data:{
						file_id:this.file_id,
						review_content: this.commont,
						by_review_id: this.by_review_id,
						by_fqvid: this.by_fqvid,
					}
				}).then(res => {
					if (!res.success) return this.$Toast(res.msg);
					this.showReply = false;
					this.delData();
					this.$emit('getDetails')
				})
			},
			// 一级 评论点赞
			zanItem(item,index){
				if(!this.vid) return this.showModel = true;
				this.$http.post({
					url:'/communityApi/zanFileId',
					data:{
						file_id:item.file_id,
						type:item.zan == 0?1:0,
						fqvid:item.fqvid,
						by_review_id:item.review_id
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.pageData.reply[index].zan == 1?this.pageData.reply[index].zan = 0:this.pageData.reply[index].zan = 1;
					this.pageData.reply[index].zan == 1?this.pageData.reply[index].zanCount++:this.pageData.reply[index].zanCount--;
				})
			},
			// 二级 评论点赞
			zansubItem(index,item,subIndex){
				if(!this.vid) return this.showModel = true;
				this.$http.post({
					url:'/communityApi/zanFileId',
					data:{
						file_id:item.file_id,
						type:item.zan == 0?1:0,
						fqvid:item.fqvid,
						by_review_id:item.review_id
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					if(this.pageData.reply[index].reply[subIndex].zan == 1){
						this.pageData.reply[index].reply[subIndex].zan = 0;
						this.pageData.reply[index].reply[subIndex].zanCount--;
					}else{
						this.pageData.reply[index].reply[subIndex].zan = 1;
						this.pageData.reply[index].reply[subIndex].zanCount++;
					}
				})
			},
			// 取消删除贴子
			cannelDel(){
				this.delData();
				this.delcomment = false;
			},
			// 删除帖子
			delcommentBtn(){
				this.delcomment = false;
				this.$http.post({
					url:'/communityApi/delMyReplyId',
					data:{
						review_id:this.by_review_id
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res);
					this.delData();
					this.$emit('getDetails')
				})
			},
			delData(){
				this.commont = '';
				this.by_review_id = '';
				this.by_fqvid = '';
				this.reply_name = '';
			},
			// 取消回复
			cancelshowReply(){
				this.delData();
				this.showReply = false;
			},
			collectionFileId(){
				this.$http.post({
					url:'/communityApi/collectionFileId',
					data:{
						file_id:this.pageData.file_id,
						type:this.pageData.collectionok == '0'?1:0
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.pageData.collectionok == '1'?this.pageData.collectionok = '0':this.pageData.collectionok = '1';
					this.pageData.collectionok == '1'?this.pageData.collectionCount++:this.pageData.collectionCount--;
				})
			},
			
			zanBtn(){
				this.$http.post({
					url:'/communityApi/zanFileId',
					data:{
						file_id:this.pageData.file_id,
						type:this.pageData.zanok == '0'?1:0
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.pageData.zanok == '1'?this.pageData.zanok = 0:this.pageData.zanok = 1;
					this.pageData.zanok == '1'?this.pageData.zanCount++:this.pageData.zanCount--;
				})
			},
			delReply(){
				this.delcomment = false;
				this.showReply = true;
			},
			
			
			
			
		},
		filters: {
			Time(time) {
				return time.substring(5, 10)
			}
		},
		computed: {
			...mapState(['color', 'System', 'vid']),
			tabbarHieght() {
				let botHigth = this.System.safeAreaInsets.bottom;
				if (botHigth != 0) {
					return botHigth + 20
				} else {
					return botHigth
				}
			}
		},
		watch:{
			infoData:{
				deep:true,
				immediate:true,
				handler(newVal){
					if(!newVal) return;
					this.pageData = newVal;
				}
			}
		
		}
		
	}
</script>

<style lang="scss" scoped>
	.comHeadImg {
		width: 50rpx;
		height: 50rpx;
		border-radius: 8rpx;
	}
	.commit {
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
	}
	
	.commit_text {
		height: 86rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 28rpx;
		color: #111111;
	}
	.commit_texts{
		height: 86rpx;
		background-color: #f7f7f7;
	}
	
	.want {
		width: 260rpx;
		height: 86rpx;
	}
	.wants{
		height: 86rpx;
		padding:0 30rpx;
	}
	.reply_content {
		width: 100%;
		padding: 40rpx 40rpx 210rpx 40rpx;
	}
	
	.textReply {
		width: 100%;
		min-height: 150rpx;
		margin-top: 40rpx;
		padding: 30rpx;
		background-color: #f7f7f7;
		font-size: 26rpx;
		border-radius: 20rpx;
		color: #111111;
	}
	.collect{
		width:100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color:#999999;
	}
	
	// 评论
	.repleContent {
		width: 550rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	
	.like {
		width: 100rpx;
		padding-top: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	
	}
	
	.name {
		color: #999999;
		font-size: 26rpx;
	}
	
	.author {
		background-color: #f6f6f6;
		padding: 6rpx 14rpx;
		border-radius: 10rpx;
		color: #686868;
		font-size: 20rpx;
		margin-left: 16rpx;
	}
	
	.comment {
		display: flex;
		align-items: center;
		line-height: 40rpx;
		margin-top: 8rpx;
		display: inline-block;
	}
	
	.comment_text {
		font-size: 28rpx;
		color: #111111;
		display: inline-block;
	}
	
	.comment_time {
		color: #999999;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	
	.Secondary {
		padding-left: 70rpx;
	}
	
	.SecondaryContent {
		width: 480rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.clear::after{
	  content: '';
	  clear: both;
	  height: 0;
	  display: block;
	  visibility: hidden;
	}
	.Off {
		position: absolute;
		width: 100%;
		height: 330rpx;
		top: 0;
		left: 0;
		background-color: rgba(91, 179, 179, 0.5);
		z-index: 10;
		color: #ffffff;
		padding: 16rpx;
		border-radius: 10rpx;
	}
	
	.Off_text {
		padding: 10rpx 16rpx;
		background-color: #ffffff;
		font-size: 26rpx;
		color: #333333;
		display: inline-block;
		border-radius: 10rpx;
	}
	.popup_list{
		width:100%;
		height: 110rpx;
		border-bottom: 1px solid #F5F5F5;
		text-align: center;
		line-height: 110rpx;
		font-size:34rpx;
	}
	.popCent{
		width:100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.cancel{
		width:100%;
		height: 120rpx;
		font-size:34rpx;
		text-align: center;
		padding-top:30rpx;
	}
</style>